<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8" />
	<title>控制台 - Bootstrap后台管理系统</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	
	<!-- BootStrap... -->
	<%@ include file="/static/include/head.jsp" %>
	
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<!-- icon style -->
	<link rel="stylesheet" href="${path }/static/index/font-awesome/4.5.0/css/font-awesome.min.css" />
		
	<!-- ace style -->
	<link href="${path }/static/index/css/ace.min.css" rel="stylesheet" class="ace-main-stylesheet" id="main-ace-style"/>
	<link href="${path }/static/index/css/ace-rtl.min.css" rel="stylesheet" />
 	<link href="${path }/static/index/css/ace-skins.min.css" rel="stylesheet" />

	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- 
	<link rel="shortcut icon" href="${path }/static/index/image/favicon.ico" />
	 -->
</head>
<!-- END HEAD -->
<body class="no-skin">
	<div id="navbar" class="navbar navbar-default  ace-save-state">
		<div class="navbar-container ace-save-state" id="navbar-container">
			<!-- header left title -->
			<div class="navbar-header pull-left">
				<a href="#" class="navbar-brand">
					<small>
						<i class="fa fa-leaf"></i> XX后台管理系统
					</small>
				</a><!-- /.brand -->
			</div><!-- /.navbar-header -->
			
			<!-- header right button -->
			<div class="navbar-buttons navbar-header pull-right" role="navigation">
				<ul class="nav ace-nav">
					<li class="grey dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<i class="ace-icon fa fa-tasks"></i>
							<span class="badge badge-grey">4</span>
						</a>
						<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-check"></i>
								还有4个任务完成
							</li>
							<li class="dropdown-content">
								<ul class="dropdown-menu dropdown-navbar">
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">软件更新</span>
												<span class="pull-right">65%</span>
											</div>
											<div class="progress progress-mini ">
												<div style="width:65%" class="progress-bar "></div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">硬件更新</span>
												<span class="pull-right">35%</span>
											</div>
											<div class="progress progress-mini ">
												<div style="width:35%" class="progress-bar progress-bar-danger"></div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">单元测试</span>
												<span class="pull-right">15%</span>
											</div>
											<div class="progress progress-mini ">
												<div style="width:15%" class="progress-bar progress-bar-warning"></div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">错误修复</span>
												<span class="pull-right">90%</span>
											</div>
											<div class="progress progress-mini progress-striped active">
												<div style="width:90%" class="progress-bar progress-bar-success"></div>
											</div>
										</a>
									</li>
								</ul>
							</li>
							<li class="dropdown-footer">
								<a href="#">
									查看任务详情
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>
					
					<li class="purple dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<i class="ace-icon fa fa-bell icon-animated-bell"></i>
							<span class="badge badge-important">8</span>
						</a>
						<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-exclamation-triangle"></i>
								8条通知
							</li>
							<li class="dropdown-content">
								<ul class="dropdown-menu dropdown-navbar navbar-pink">
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">
													<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
													新闻评论
												</span>
												<span class="pull-right badge badge-info">+12</span>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<i class="btn btn-xs btn-primary fa fa-user"></i>
											切换为编辑登录..
										</a>
									</li>
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">
													<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
													新订单
												</span>
												<span class="pull-right badge badge-success">+8</span>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">
													<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
													粉丝
												</span>
												<span class="pull-right badge badge-info">+11</span>
											</div>
										</a>
									</li>
								</ul>
							</li>
							<li class="dropdown-footer">
								<a href="#">
									查看所有通知
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>
					
					<li class="green dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
							<span class="badge badge-success">5</span>
						</a>
						<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-envelope-o"></i>
								5条消息
							</li>
							
							<li class="dropdown-content">
								<ul class="dropdown-menu dropdown-navbar">
									<li>
										<a href="#">
											<img src="${path }/static/index/images/user.png" class="msg-photo" alt="Alex's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Alex:</span>
													不知道写啥 ...
												</span>
												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>1分钟以前</span>
												</span>
											</span>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="${path }/static/index/images/user.png" class="msg-photo" alt="Susan's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Susan:</span>
													不知道翻译...
												</span>
												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>20分钟以前</span>
												</span>
											</span>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="${path }/static/index/images/user.png" class="msg-photo" alt="Bob's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Bob:</span>
													到底是不是英文 ...
												</span>
												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>下午3:15</span>
												</span>
											</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="dropdown-footer">
								<a href="inbox.html">
									查看所有消息
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>
					
					<li class="light-blue dropdown-modal">
						<a data-toggle="dropdown" href="#" class="dropdown-toggle">
							<img class="nav-user-photo" src="${path }/static/index/images/user.png" alt="Jason's Photo" />
							<span class="user-info">
								<small>欢迎光临,</small>Jason
							</span>
							<i class="ace-icon fa fa-caret-down"></i>
						</a>
						<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
							<li>
								<a href="#">
									<i class="ace-icon fa fa-cog"></i>设置
								</a>
							</li>
							<li>
								<a href="#">
									<i class="ace-icon fa fa-user"></i>个人资料
								</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="#">
									<i class="ace-icon fa fa-power-off"></i>退出
								</a>
							</li>
						</ul>
					</li>
				</ul><!-- /.ace-nav -->
			</div><!-- /.navbar-header -->
		</div><!-- /.container -->
	</div>

	<!-- left menu & right content -->
	<div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
			try{ace.settings.loadState('main-container')}catch(e){}
		</script>

		<!-- left menu -->
		<div class="sidebar responsive ace-save-state" id="sidebar">
			<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
				<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" 
				data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
			</div>

			<ul class="nav nav-list" id="menu"></ul><!-- /.nav-list -->
		</div>

		<!-- right content -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<!-- ace settings -->
					<div class="ace-settings-container" id="ace-settings-container">
						<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
							<i class="ace-icon fa fa-cog bigger-130"></i>
						</div>

						<div class="ace-settings-box clearfix" id="ace-settings-box">
							<div class="pull-left width-50">
								<div class="ace-settings-item">
									<div class="pull-left">
										<select id="skin-colorpicker" class="hide">
											<option data-skin="no-skin" value="#438EB9">#438EB9</option>
											<option data-skin="skin-1" value="#222A2D">#222A2D</option>
											<option data-skin="skin-2" value="#C6487E">#C6487E</option>
											<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
										</select>
									</div>
									<span>&nbsp; 选择皮肤</span>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
									<label class="lbl" for="ace-settings-navbar"> 固定导航条</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
									<label class="lbl" for="ace-settings-sidebar"> 固定滚动条</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
									<label class="lbl" for="ace-settings-rtl"> 切换到左边</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
									<label class="lbl" for="ace-settings-add-container"> 切换窄屏</label>
								</div>
							</div><!-- /.pull-left -->

							<div class="pull-left width-50">
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
									<label class="lbl" for="ace-settings-hover"> 悬停的子菜单</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
									<label class="lbl" for="ace-settings-compact"> 紧凑型侧边栏</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
									<label class="lbl" for="ace-settings-highlight"> 外向活动项目</label>
								</div>
							</div><!-- /.pull-left -->
						</div><!-- /.ace-settings-box -->
					</div><!-- /.ace-settings-container -->

					<!-- content tabs -->
					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<ul class="nav nav-tabs" role="tablist">
		       					<li class="active"><a href="#Index" role="tab" data-toggle="tab">首页</a></li>
		      				</ul>
		      				<div class="tab-content">
		       					<div role="tabpanel" class="tab-pane active" id="Index"></div>
		      				</div>
							<!-- PAGE CONTENT ENDS -->
						</div><!-- /.col -->
					</div><!-- /.row -->
				</div><!-- /.page-content -->
			</div>
		</div><!-- /.main-content -->

		<!-- page foot -->
		<div class="footer">
			<div class="footer-inner">
				<div class="footer-content">
					<span class="bigger-100">
						<span class="blue bolder">Ace</span>
						Application &copy; 2013-2014
					</span>
					&nbsp; &nbsp;
					<span class="action-buttons">
						<a href="#">
							<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
						</a>
					</span>
				</div>
			</div>
		</div>

		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>
	</div><!-- /.main-container -->

	<!-- ace settings handler -->
	<script src="${path }/static/index/js/ace-extra.min.js"></script>
	<!-- ace scripts -->
	<script src="${path }/static/index/js/ace-elements.min.js"></script>
	<script src="${path }/static/index/js/ace.min.js"></script>
	<!-- personal script -->
	<script src="${path }/static/index/js/sidebar-menu.js" type="text/javascript"></script>
	<script src="${path }/static/index/js/bootstrap-tab.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(window).resize(function() {
		  	$("#sidebar").height($(window).height()-$("#navbar").height());
		  	$("div .tab-pane iframe").height($("#sidebar").height());
		});
		
		$(function () {
				$("#sidebar").height($(window).height()-$("#navbar").height());
				$(".page-content").height($("#sidebar").height());
				
				// generate menu code from backend
			    $('#menu').sidebarMenu({
			    	url:'${path}/menu',
			    	param:{id:'1'}
			    });
		});
	</script>
	<!-- END JAVASCRIPTS -->
	</body>
</html>